<template>
  <!--  -->
  <!-- <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
   
  </nav>
  <router-view/>  -->
  <!-- this.$router.push() -->
  <!--{{banzhang}}
  <div>{{xuewei}}</div>
  <div>{{jiali.name}}</div>
  <div @click="changvalue()">去掉问号</div> -->
  <div>{{person.age}}</div>
  <div @click="changvalue()">修改单鑫的年龄</div>
</template>
<script>
  import  {ref , reactive} from "vue";
  // 2.0的写法在3.0里面基本适用
  // 2.0的写法在3.0里面我们最好不用
  export default {
    // vue.2 里面Object.defineProperty
    // vue.3 new Proxy()
    // beforeCreate created 3.0移除
    // 用setup()代替 只执行一次
    setup(){
      // 函数能写在声明的变量上面
      //  function changvalue(){
      //   console.log(_self)
      //   // setup中的this是undefind
      //   jiali.value.name ="大美女"
      // }
      // let _self= this;
      // let banzhang = "帅哥?";
      // let xuewei = ref("小仙女?");
      // console.log(xuewei.value);
      // let jiali = ref({
      //   name:"小美女",
      //   age:17
      // })
      // ref只能声明基本数据类型 最好不要声明引用数据类型
      // 如果声明的是引用数据类型 其value值是proxy对象对导致出现其他问题
      // 正常取值是可以的
      // console.log(jiali)
      // ref(放一个值) 取值要.value
      // ref的值在页面上不用.value
     
      // reactive()用于声明复杂数据类型及引用数据类型；
      let person = reactive({
        name:"单鑫",
        age:"200"
      });
      function changvalue(){
        person.age = "18"
        alert("2")
      }
      // let lifeng = ref({
      //   name:"李凤",
      //   age:17
      // })
      // let lifeng = reactive("李凤真可爱");
      // console.log(lifeng)
      console.log(person.name);
      // console.log(lifeng);
      // ref如果声明成非基本数据类型 那么ref.value自动变成reactive
      // reactive不能声明成基本数据类型
      // 2.0 data的return 写进了 setup里面
      // 2.0 methods函数 写进setup里面 并且如果和页面响应要return
      return{
        person,
        changvalue
        // banzhang,
        // xuewei,
        // jiali,
        // changvalue
        // 如果return是个单纯的变量
        // 他不是相应式的 只能在页面显示而已
        // ref声明变量 是响应式的 
      }
    },
    // methods里面的函数和setup重名优先执行methods
    // methods:{
    //   changvalue(){
    //     alert("1")
    //   }
    // }
  }
</script>
<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
